<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style>
	.form-item {
		margin: 20px 10px;
	}
	
	.form-item>label {
		letter-spacing: 3px;
		width: 110px;
		text-align: right;
		display: inline-block;
	}
	
	.form-item>label:after {
		content: ":";
	}
	
	.form-item input[type=text] {
		width: 100px;
	}
	
	.form-item.required>label:before {
		content: "*";
		color: red;
	}
</style>
<form id="addTeamForm">
	<h3 style="text-align: center;margin-top: 30px;">${team==null?'添加':'编辑' }团队信息</h3>
	<input type="hidden" name="teamId" value="${team.teamId }"/>
	<input type="hidden" name="userinfo" value="${userinfo.userInfoId }">
	<br />
	<span style="margin-left: 20px;">注：其中 <span style="color: red;">*</span> 为必填选项</span>
	<br />
	<div class="form-item required">
		<label for="">团队名称</label>
		<input value="${team.teamName }" style="width:160px;"  type="text" name="teamName" data-options="required:true"  class="easyui-textbox" />
		<label style="width: 100px;" for="">创建人</label>
		<input name="createName"  style="width:60px;"  value="${userinfo.userName }" readonly="readonly" type="text" class="easyui-textbox" />
	</div>
	<div  class="form-item required" style="margin-left: 60px;">
		所属班级：<select id="banjiId" name="classId" style="height:24px;border-radius: 5px;border-color: dodgerblue;margin-right: 100px;"  onchange="move(this.value)" >
			<option value="请选择">-请选择-</option>
			<c:forEach items="${classList }" var ="x">
				<option value="${x.classId }" ${classEntity.classId==x.classId?'selected':''}>${x.className }</option>
			</c:forEach>
		</select>
		
		组长：<select id="zuZhangId" name="zuZhangId"  style="height:24px;border-radius: 5px;border-color: dodgerblue;" onchange="move2(this.value)" >
				<option value="请选择">-请选择-</option>
				<c:forEach items="${studentList }" var="studentList">
					<option  value="${studentList.stuId }" ${zuZhang.stuId==studentList.stuId?'selected':''}>${studentList.studentName }</opon>
				</c:forEach>
			</select>
	</div>
	<div class="form-item required">
		<label style="width: 180px;margin-left: -70px;" for="">添加成员</label><br /><br>
		<table cellspacing="1" width="350px" align="center"
			style="margin-left: 20px;">
			<tr>
				<td>
					<table style="background-color: white" width="100%">
						<tr>
							<td>
								<fieldset>
									<legend style="text-align: center;">该班级中所有的学生</legend>
									<select name="left_select" multiple="multiple" size="8" id="left_select"
										style="width: 180px; border: 0px; padding: 3px;outline: none">
										<c:forEach items="${studentList2 }" var="studentList2">
											<option value="${studentList2.stuId }">${studentList2.studentName }</option>
										</c:forEach>
									</select>
								</fieldset>
							</td>
							<td></td>
							<td><input type="button" value="<" style="
								font-size:10pt;width:35px;margin-top:10px;" onclick="left()"><br> <input
								type="button" value="<<" style="font-size:10pt;width:35px;margin-top:10px;" onclick="left(true)"><br>
								<input type="button" value=">"
								style="font-size: 10pt; width: 35px;margin-top:10px;" onclick="right()"><br>
								<input type="button" value=">>"
								style="font-size: 10pt; width: 35px;margin-top:10px;" onclick="right(true)"><br>
							</td>
							<td></td>
							<td>
								<fieldset>
									<legend style="text-align: center;">选定的组员</legend>
									<select name="right_select" multiple="multiple"
										style="width: 180px; border: 0px; padding: 3px;outline: none" size="8"
										id="right_select">
										<c:forEach items="${zuyuan }" var="zuyuan">
											<option value="${zuyuan.stuId }">${zuyuan.studentName}</option>
										</c:forEach>
									</select>
									<input type="hidden" name="selectedClass" id="gray">
								</fieldset>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
	<script>
	function move(obj) {
		var id=obj;
		 var optionString = "";
		 $.get("jiaoxue/teamcontent/" + id, function(rs) {
				if (rs.success) {
					var data=rs.message;
					for (var i = 0; i < data.length; i++) {
							 optionString +="<option grade=\""+data[i].stuId+"\" value=\""+data[i].stuId+"\"";  
		                      optionString += ">"+data[i].studentName+"</option>";  //动态添加数据  
					}
					 $("select[id=zuZhangId]").empty();
					 //$("select[id=left_select]").empty();
					 $("select[id=zuZhangId]").append(optionString);
					 var studentId=$("#zuZhangId").val();//组长的信息
					// alert("获取组长的信息："+studentId);
					 var optionString2 = "";
						$.get("jiaoxue/teamcontent3/" + id+"/"+studentId, function(rs) {//获取待选的学生信息
							 if (rs.success) {
								var data=rs.data;
								for (var i = 0; i < data.length; i++) {
										 optionString2 +="<option grade=\""+data[i].stuId+"\" value=\""+data[i].stuId+"\"";  
					                      optionString2 += ">"+data[i].studentName+"</option>";  //动态添加数据  
								}
								 $("select[id=left_select]").empty();
								 $("select[id=left_select]").append(optionString2);
							}
						 });
				}else{
					$.message.alert("提示错误！")
				}
			});
	}
	//组长的下拉框发生改变那么随之待选的学生也要发生改变
	function move2(obj){
		var studentId=obj;//组长编号
		var classId=$("#banjiId").val();//所属班级
		var str = $("#right_select option").map(function(){return $(this).val();}).get().join(", ")
		var str2 = $("#left_select option").map(function(){return $(this).val();}).get().join(", ")
		var x=[];
		if (str!=null&&str!='') {
			x=str.split(",");
			var y=str2.split(",");
				for (var i = 0; i < x.length; i++) {
					if (studentId==x[i]) {
						$("#right_select option[value='"+studentId+"']").remove();
					}
				}
				for (var i = 0; i < y.length; i++) {
					if (studentId==y[i]) {
						$("#left_select option[value='"+studentId+"']").remove();
					}
				}
				var optionString = "";
				$.get("jiaoxue/teamcontent2/" + classId+"/"+studentId+"/"+x, function(rs) {//获取待选的学生信息
					 if (rs.success) {
						var data=rs.data;
						for (var i = 0; i < data.length; i++) {
								 optionString +="<option grade=\""+data[i].stuId+"\" value=\""+data[i].stuId+"\"";  
			                      optionString += ">"+data[i].studentName+"</option>";  //动态添加数据  
						}
						 $("select[id=left_select]").empty();
						 $("select[id=left_select]").append(optionString);
					}
				 });
		}else{
			//alert("没有组员");
			var optionString = "";
			$.get("jiaoxue/teamcontent3/" + classId+"/"+studentId, function(rs) {//获取待选的学生信息
				 if (rs.success) {
					var data=rs.data;
					for (var i = 0; i < data.length; i++) {
							 optionString +="<option grade=\""+data[i].stuId+"\" value=\""+data[i].stuId+"\"";  
		                      optionString += ">"+data[i].studentName+"</option>";  //动态添加数据  
					}
					 $("select[id=left_select]").empty();
					 $("select[id=left_select]").append(optionString);
				}
			 });
		}
		
		
	}
	//isAll 是否全部移动  
	function left(isAll) {
		var os = new Array();
		os = $("#right_select").find("option");
		for (i = 0; i < os.length; i++) {
			if (isAll) {
				var o = new Option(os[i].text, os[i].value);
				$("#left_select").append(o);
				$("#right_select").find("option").remove();
			} else {
				if (os[i].selected) {
					var o = new Option(os[i].text, os[i].value);
					$("#left_select").append(o);
					$("#right_select").find("option:selected").remove();
				}
			}
		}
	}
	function right(isAll) {
		var os = new Array();
		os = $("#left_select").find("option");
		for (i = 0; i < os.length; i++) {
			if (isAll) {
				var o = new Option(os[i].text, os[i].value);
				$("#right_select").append(o);
				$("#left_select").find("option").remove();
			} else {
				if (os[i].selected) {
					var o = new Option(os[i].text, os[i].value,os[i].selected);
					$("#right_select").append(o);
					var str = $("#right_select option").map(function(){return $(this).val();}).get().join(", ")
					$("#gray").val(str);
					$("#left_select").find("option:selected").remove();
				}
			}
		}
	}
</script>
</form>